<template>
  <div id="main">
    <div class="head">
      <img src="@/assets/images/logo-head.png">
    </div>
    <div class="nav">
      <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1" @click="redirectTologin">首页</el-menu-item>
        <el-menu-item index="2" @click="goTo('/inancial_product')">金融服务</el-menu-item>
        <el-submenu index="3">
          <template slot="title">供需对接</template>
          <el-menu-item index="3-1" @click="goTo('/reqmarket')">需求市场</el-menu-item>
          <el-menu-item index="3-2" @click="goTo('/rspmarket')">供应市场</el-menu-item>
        </el-submenu>
        <el-menu-item index="4" @click="goTo('/example')">看样学样</el-menu-item>
        <el-menu-item index="5" @click="goTo('/digitalLevel')">数字化水平评测</el-menu-item>
        <el-menu-item index="6">数字化转型培训</el-menu-item>
        <el-menu-item index="7">saas化服务</el-menu-item>
        <!--        <el-submenu index="7">
                  <template slot="title">saas化服务</template>
                  <el-menu-item index="7-1" @click="goTo('/saas_product')">免费服务</el-menu-item>
                  <el-menu-item index="7-2" @click="goTo('/saas_login')">综合服务</el-menu-item>
                </el-submenu>-->
        <el-menu-item index="8" @click="redirectToblogin">
          <i class="el-icon-user"></i>
          <span slot="title">管理端登录</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="example" ref="formRef" :model="dataForm">
      <div class="enterprise-name">{{ dataForm.companyname }}</div>
      <div class="headline">一、企业基础信息</div>
      <div class="example-des">
        <div class="des-main">
          <label>所属区域：</label>
          <div>{{dataForm.region}}</div>
        </div>
        <div class="des-main">
          <label>所属行业：</label>
          <div>{{dataForm.industry.split("/")[1]}}</div>
        </div>
        <div class="des-main">
          <label>企业简介：</label>
          <div class="des-html" v-html="dataForm.gaicompanyinfo">{{dataForm.gaicompanyinfo}}</div>
        </div>
      </div>
      <div class="headline">二、项目背景</div>
      <div class="example-des">
        <div class="des-main">
          <label>改造前数字化水平等级：</label>
          <div>{{dataForm.levelbefore}}</div>
        </div>
        <div class="des-main">
          <label>改造前数字化现状：</label>
          <div class="des-html2"  v-html="dataForm.infobefore">{{dataForm.infobefore}}</div>
        </div>
        <div class="des-main">
          <label>数字化改造需求：</label>
          <div class="des-html2"  v-html="dataForm.digitalrequire">{{dataForm.digitalrequire}}</div>
        </div>
      </div>
      <div class="headline">三、企业数字化改造项目实施</div>
      <div class="example-des">
        <div class="des-main">
          <label>项目名称：</label>
          <div>{{dataForm.projectname}}</div>
        </div>
        <div class="des-main">
          <label>合作数字化服务商：</label>
          <div>{{dataForm.cooperationdigitalserver}}</div>
        </div>
        <div class="des-main">
          <label>项目内容：</label>
          <div class="des-html2"  v-html="dataForm.projectinfo">{{dataForm.projectinfo}}</div>
        </div>
      </div>
      <div class="headline">四、项目实施效果</div>
      <div class="example-des">
        <div class="des-main">
          <label>(预期)改造后数字化水平等级：</label>
          <div>{{dataForm.levelafter}}</div>
        </div>
        <div class="des-main">
          <label>改造后数字化情况：</label>
          <div class="des-html2"  v-html="dataForm.infoafter">{{dataForm.infoafter}}</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-main">
        <div class="footer-left">
          <img src="@/assets/images/logo.png" />
        </div>
        <div class="footer-mid">
          <div class="mid1">
            福州市中小企业数字化转型公共服务平台
          </div>
          <div class="mid2">
            <div class="mid-info">地址：仓山区南江滨西大道193号东部商务办公区5号楼6层</div>
            <div class="mid-info">电话：(0591)83258525</div>
            <a href="/" target="_blank">关于我们</a>
          </div>
          <div class="mid3">
            <div class="mid-info">工作时间：8:30-18:00（工作日）</div>
            <div class="mid-info">邮箱：fzzxqyfw@163.com</div>
            <a href="/" target="_blank">联系我们</a>
          </div>
        </div>
        <div class="footer-right">
          <img src="@/assets/images/ewm.jpg" />
          <label>扫码关注公众号</label>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'

import {getConfigData} from '@/api/onlineDev/visualDev'
import jnpf from '@/utils/jnpf'
import Detail from '@/views/basic/dynamicModel/list/detail'
import {thousandsFormat} from "@/components/Generator/utils/index"

export default {
  name: "Detail",
  components: {Detail},
  props: [],
  data() {
    return {
      activeIndex: '4',
      visible: false,
      detailVisible: false,
      loading: false,
      dataForm: {
        id: '',
        region: "",
        industry: [],
        companyname: '',
        pic: [],
        gaicompanyinfo: '',
        levelbefore: "",
        infobefore: '',
        digitalrequire: '',
        projectname: '',
        projectinfo: '',
        cooperationdigitalserver: '',
        levelafter: "",
        infoafter: '',
        enterprisenmae: '',
        enterprisecreditcode: '',
        creatoruserid: "",
        creatortime: "",
        lastmodifyuserid: "",
        lastmodifytime: "",
        fz_learn_example_clickList: [],
        fz_learn_example_taskList: [],
      },
      regionProps: {"label": "fullName", "value": "id"},
      industryProps: {"label": "fullName", "value": "id", "children": "children"},
      levelbeforeOptions: [{"fullName": "无等级", "id": "0"}, {"fullName": "一级", "id": "1"}, {
        "fullName": "二级",
        "id": "2"
      }, {"fullName": "三级", "id": "3"}, {"fullName": "四级", "id": "4"}, {"fullName": "五级", "id": "5"}],
      levelbeforeProps: {"label": "fullName", "value": "id"},
      levelafterOptions: [{"fullName": "无等级", "id": "0"}, {"fullName": "一级", "id": "1"}, {
        "fullName": "二级",
        "id": "2"
      }, {"fullName": "三级", "id": "3"}, {"fullName": "四级", "id": "4"}, {"fullName": "五级", "id": "5"}],
      levelafterProps: {"label": "fullName", "value": "id"},

    }
  },
  computed: {},
  watch: {},
  created() {
    console.log("id2----"+JSON.stringify(this.$route.params.id))
    this.init(atob(this.$route.params.id))
  },
  mounted() {
  },
  methods: {
    handleSelect(key, keyPath) {
    },
    redirectTologin() {
      this.$router.push({ path: '/login', query: { redirect: '/' } });
    },
    redirectToblogin() {
      const token = localStorage.getItem('jnpf_token');
      if (token) {
        this.$router.push("/home");
      } else {
        window.open("/blogin");
      }
    },
    goTo(path) {
      this.$router.push(path);
    },
    toDetail(defaultValue, modelId) {
      if (!defaultValue) return
      getConfigData(modelId).then(res => {
        if (!res.data || !res.data.formData) return
        let formData = JSON.parse(res.data.formData)
        formData.popupType = 'general'
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.Detail.init(formData, modelId, defaultValue)
        })
      })
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      this.dataForm = _dataAll
    },
    goBack() {
      this.$emit('refresh')
    },
    init(id) {
      console.log("id-------"+JSON.stringify(id))
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/example/Fz_learn_example/detail/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        }

      })
    },
  },
}

</script>
<style lang="scss" scoped>
#main {
  width: 100%;
  background: #F0F4F9;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 0.2fr auto 0.8fr;
  gap: 0px 0px;
  grid-template-areas:
    "head head head head"
    "nav nav nav nav"
    "example example example example"
    "footer footer footer footer";
}

.head {
  grid-area: head;
  width: 1200px;
  flex-direction: row;
  display: flex;
  margin: 20px auto;

  img {
    height: 60px;
    width: auto;
  }
}

.el-menu--horizontal .el-menu--popup,
.el-menu--popup .el-menu-item {
  background: #1890FF;
  color: #FFFFFF;
  font-weight: bold;
}

.nav {
  grid-area: nav;
  display: flex;
  background: linear-gradient(90deg, #1890FF 50%, #3FB9F1 100%);

  a {
    text-decoration: none;
  }

  .el-menu {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    border: none !important;
    background: none !important;
  }

  .el-menu li:last-child {
    position: absolute;
    right: 0;
  }

  .el-dropdown-menu__item,
  .el-menu-item {
    padding: 0 25px !important;
  }

  .el-menu--horizontal .el-menu .el-menu-item,
  .el-menu--horizontal .el-menu-item,
  .el-menu-item i,
  ::v-deep .el-submenu__title,
  ::v-deep .el-submenu__title i {
    color: #FFFFFF;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item.is-active,
  .el-menu--horizontal .el-menu-item:hover,
  .el-menu--horizontal .el-menu-item:focus {
    color: #303132 !important;
    border-bottom: 2px solid #1890FF !important;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item.is-active i,
  .el-menu--horizontal .el-menu-item:hover i,
  .el-menu--horizontal .el-menu-item:focus i {
    color: #303132 !important;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item,
  .el-menu-item i,
  .el-submenu__title,
  .el-submenu {
    color: #FFFFFF !important;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item.is-active,
  .el-menu--horizontal .el-menu-item:hover,
  .el-menu--horizontal .el-menu-item:focus,
  .el-submenu--horizontal.is-opened>.el-submenu__title {
    color: #303132 !important;
    border-bottom: 2px solid #1890FF !important;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item.is-active i,
  .el-menu--horizontal .el-menu-item:hover i,
  .el-menu--horizontal .el-menu-item:focus i,
  .el-submenu--horizontal.is-opened>.el-submenu__title i {
    color: #303132 !important;
    font-weight: bold;
  }
}

.example {
  grid-area: example;
  width: 1200px;
  margin: 20px auto;
  background: #ffffff;
  padding: 40px 30px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;

  .enterprise-name{
    font-size: 20px;
    text-align: center;
    color: #5A5A5A;
    border-bottom: 2px solid #1890FF;
    padding-bottom: 20px;
    font-weight: 600;
  }

  .headline{
    color: #5A5A5A;
    font-size: 18px;
    line-height: 30px;
    margin-top: 20px;
    font-weight: 600;
  }

  .example-des{
    margin-left: 80px;

    .des-main{
      margin: 20px 0px;
      font-size: 14px;
      display: flex;
      flex-direction: row;

      label{
        color: #101010;
        width: auto;
      }

      .des-html{
          width: calc(100% - 70px);
      }

      .des-html2{
        width: calc(100% - 130px);
      }

      div{
        color: #5A5A5A;

        ::v-deep img{
          margin: auto;
          display: block;
          max-width: 100%;

        }
      }
    }
  }
}

.footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "footer-main";
  grid-area: footer;
  background: #073C76;
}

.footer-main {
  display: grid;
  grid-template-columns: 0.3fr 2.4fr 0.3fr;
  grid-template-rows: 1fr;
  gap: 0px 20px;
  grid-template-areas:
    "footer-left footer-mid footer-right";
  grid-area: footer-main;
  width: 1200px;
  margin: 50px auto 30px auto;
}

.footer-left {
  grid-area: footer-left;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;

  img {
    width: 100px;
  }
}

.footer-right {
  grid-area: footer-right;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  justify-content: center;
  align-items: center;

  img {
    width: 90px;
  }

  label {
    margin-top: 10px;
    font-size: 12px;
  }
}

.footer-mid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.4fr 0.8fr 0.8fr;
  gap: 20px 0px;
  grid-template-areas:
    "mid1"
    "mid2"
    "mid3";
  grid-area: footer-mid;
  color: #FFFFFF;

  .mid-info {
    width: 60%;
  }

  a {
    color: #FFFFFF;
    text-decoration: none;
    position: absolute;
    right: 0;
  }
}

.mid1 {
  grid-area: mid1;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 3px;
  padding-bottom: 10px;
  border-bottom: 1px #BBBBBB solid;
}

.mid2 {
  grid-area: mid2;
  display: flex;
  flex-direction: row;
  position: relative;
}

.mid3 {
  grid-area: mid3;
  display: flex;
  flex-direction: row;
  position: relative;
}
</style>
